<template>
  <div ref="bottom1" style="height: 100%">
    {{ed}}
  </div>
</template>
<script>
//获取请求工具
import { get } from "../../../utils/request";
import { Pie } from "@antv/g2plot";
export default {

  // //计算属性
  //   computed:{
  //    ...mapState(['ed'])
  //   },

  //生命周期钩子，表示当页面渲染完毕时执行
  mounted() {
    this.initData();
  },

  //数据，必须返回一个数据，在这个对象中定义页面中需要的变量
  data() {
    return {
      dataArr: [],
      //  //声明一个变量，初始值为空数组
      //  devices:[]
    };
  },

  //方法，可以在生命周期中调用，或被事件触发
  methods: {
    //加载数据-与后台交互获取设备数据
    initData() {
      let url = "http://127.0.0.1:7001/dashboard/queryDeviceOnlineNumber";
      get(url).then((res) => {
        console.log(3333, res);
        //res后台返回给我们的结果
        this.dataArr = res.data;
        this.initChart()
      });
    },
    initChart() {
      const pie = new Pie(this.$refs.bottom1, {
        appendPadding: 10,
        data:this.dataArr,
        angleField: "value",
        colorField: "type",
        radius: 0.9,
      });
      pie.render();
    },
    
  },
};
</script>
<style scoped>

</style>